<template>
  <div id="index_container">
    <div id="search_wrap">
      <map-search></map-search>
    </div>
    <div id="map_wrap">
      <map-container></map-container>
    </div>
    <div id="shadow">
    </div>
  </div>
</template>

<script>
import MapContainer from '@/components/MapContainer/MapContainer.vue'
import MapSearch from '@/components/MapContainer/MapSearch.vue'
export default {
  components: { MapContainer, MapSearch }
}
</script>

<style scoped>
#index_container {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;

}

#index_container> #map_wrap {
  z-index: 10;
  position: absolute;

  bottom: -5%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60%;
  width: 70%;
}
#index_container> #search_wrap {
  z-index: 10;
  position: absolute;
  top: 10%;
  left: 50%;
  height: 60px;
  width: 400px;
  transform: translate(-50%, -50%);
}
#index_container> #shadow {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 255);
}


</style>